<template>
  <el-select v-model="selectValue" clearable
             @change="changHandl" :class="{required: valid}"
             :multiple="multiple"
             :placeholder="placeholder">
    <el-option
      v-for="item in list"
      :label="item.label"
      :key="item.value"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'advance-selector',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    multiple: {
      type: [Boolean, String],
      default: false
    },
    valid: {
      type: [Boolean],
      default: false
    },
    value: {
      type: [String, Number, Array]
    }
  },
  watch: {
    // 判断下拉框的值是否有改变
    selectValue(val, oldVal) {
      if (val !== oldVal) {
        this.$emit('input', this.selectValue)
      }
    },
    value(val) {
      if (typeof val === 'number') {
        this.selectValue = val.toString()
      } else {
        this.selectValue = val
      }
    }
  },
  data() {
    return {
      selectValue: ''
    }
  },
  methods: {
    changHandl(val) {
      this.$emit('change', val)
    }
  }
}
</script>

<style scoped>

</style>
